<template>
    <div>
        <el-card>
            <el-row style="min-width: 1600px; overflow: auto; ">
                <h2>个人信息</h2>

                <el-col :span="8">
                    <el-descriptions :column="2" :size="size" border
                        style="width: 500px; margin-top: 20px; margin-bottom: 10px;">
                        <el-descriptions-item label="真实姓名">{{ userInfoForm.real_name }}</el-descriptions-item>
                        <el-descriptions-item label="手机号">{{ userInfoForm.phone }}</el-descriptions-item>
                        <el-descriptions-item label="学号">{{ userInfoForm.stu_id }}</el-descriptions-item>

                        <el-descriptions-item label="学院">{{ userInfoForm.institute }}</el-descriptions-item>
                        <el-descriptions-item label="专业">{{ userInfoForm.major }}</el-descriptions-item>
                        <el-descriptions-item label="入学年份">{{ userInfoForm.enroll_year }}</el-descriptions-item>

                    </el-descriptions>
                </el-col>

                <el-col :span="4">
                    <el-avatar style=" margin-top: 20px; margin-bottom: 10px;" shape="square" :size="140" :fit="fit"
                        :src="userInfoForm.url"></el-avatar>
                </el-col>


            </el-row>
        </el-card>

        <el-card id="userInfo" style="margin-top: 20px;">



            <el-row style="min-width: 1600px; overflow: auto; ">
                <h2>我的借阅</h2>
                <el-table :data="loanRecordList" stripe style="width: 70%">

                    <el-table-column prop="book_name" label="书名" align="center">
                    </el-table-column>

                    <el-table-column prop="category" label="分类" align="center">
                        <template slot-scope="scope">
                            {{ scope.row.category.cateName }}
                        </template>
                    </el-table-column>

                    <el-table-column prop="isbn" label="ISBN" align="center">
                    </el-table-column>

                    <el-table-column prop="revert_date" label="归还日期" :formatter="dateFormat" align="center">
                    </el-table-column>

                    <el-table-column prop="is_overdue" label="是否逾期" align="center">
                        <template slot-scope="scope">
                            <a v-if="scope.row.is_overdue === 1" style="color: red;">已逾期</a>
                            <a v-else>未逾期</a>
                        </template>
                    </el-table-column>

                    <el-table-column prop="is_revert" label="是否归还" align="center">
                        <template slot-scope="scope">
                            <a v-if="scope.row.is_revert === 1">已归还</a>
                            <a v-else>未归还</a>
                        </template>
                    </el-table-column>

                    <el-table-column label="操作" align="center" width="200px">
                        <template slot-scope="scope">

                            <el-button type="primary" size="mini" @click="handleClickRevertBook(scope.row.id)">还书</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-row>

        </el-card>


    </div>
</template>

<script >
import { mapGetters } from 'vuex';
import moment from "moment";
import request from '@/utils/request'
import { Message } from 'element-ui';

export default {
    data() {
        return {
            userInfoForm: {
                real_name: '张三1',
                stu_id: '20230011011',
                phone: '17306641010',
                institute: '计算机学院',
                major: '软件工程', // 入学年份
                enroll_year: '2023', // 入学年份
                url: 'http://192.168.99.30:8080/user/9A6F7BBD08C74AFFA0B2C3404A17A5D192c00d32ec35c6d76b9f70dd4f4be31.png'
            },
            loanRecordList: [
                {
                    id: '111',
                    book_name: 'C++程序设计（第三版）',
                    book_id: '11111',
                    category: { id: '1', cateName: '编程' },
                    isbn: '321598723895',
                    revert_date: '2013-08-06T07:55:28.000+00:00', // 归还日期
                    is_overdue: 1, // 是否逾期
                    is_revert: 0
                },

                {
                    id: '222',
                    book_name: 'Java编程思想（第四版）',
                    book_id: '22222',
                    category: { id: '1', cateName: '编程' },
                    isbn: '321598723895',
                    revert_date: '2013-08-06T07:55:28.000+00:00', // 归还日期
                    is_overdue: 0, // 是否逾期
                    is_revert: 0
                },
            ],
        }
    },
    mounted() {
        this.loadUserInfo();
        this.loadLoanRecordList()
    },
    methods: {
        dateFormat: function (row, column) {
            var date = row[column.property];
            if (date === undefined) {
                return "";
            }
            return moment(date).format("YYYY-MM-DD");
        },

        loadUserInfo() {
            request({
                url: 'user/basic_info',
                method: 'get',

            }).then((resp) => {
                this.userInfoForm = resp.data
            }).catch((resp) => {
                this.$message({
                    type: 'error',
                    message: resp.message
                })
            })
        },

        loadLoanRecordList() {
            request({
                url: 'loans',
                method: 'get',

            }).then((resp) => {
                this.loanRecordList = resp.data
            }).catch((resp) => {
                this.$message({
                    type: 'error',
                    message: resp.message
                })
            })
        },
        handleClickRevertBook(id) {
            this.$confirm('请将书平放至还书窗口（ISBN码朝上）', '提示', {
                type: 'warning'
            }).then(() => {
                request({
                    url: 'loans/revert/' + id,
                    method: 'delete',
                }).then((resp) => {
                    this.$message({
                        type: 'success',
                        message: '还书成功'
                    })
                    this.loadLoanRecordList();
                }).catch((resp) => {
                    this.$message({
                        type: 'error',
                        message: resp.message
                    })
                })
            })
        }
    },

}
</script>